<template>
  <!-- 图片|视频 展示弹框  -->
  <div class="img-video-modal">
    <!-- 操作指南 -->
    <a-modal
      width="80vw"
      style="height: 500px"
      :title="title"
      :visible="config.visible"
      class="admin-modal"
      @cancel="config.visible = false"
    >
      <a-spin :spinning="spinning">
        <!--走马灯-->
        <a-carousel arrows style="min-height: 300px">
          <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>

          <div
            class="item-nav item-img"
            v-show="config.type==='img' && config.scrList.length > 0"
            v-for="(item, index) in config.scrList"
            :key="index"
          >
            <div v-if="config.visible" class="div-img">
              <img
                :src="item.src || ''"
                :width="item.width"
                :height="item.height"
                :alt="item.alt || 'img'"
              />
            </div>
          </div>

          <div class="list-empty" v-if="config.scrList.length <= 0">
            <a-empty />
          </div>

          <!--<div class="item-nav item-video" v-else style="background-color: #eb2f96;width: 100px;height: 300px">
                        &lt;!&ndash;<video width="100%" height="100%" controls="controls" autoplay="autoplay">
                            <source src="https://surgemobi-data.s3-ap-southeast-1.amazonaws.com/video/8_1571735632848.mp4" type="video/mp4" />
                        </video>&ndash;&gt;
          </div>-->
        </a-carousel>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ImgVoModal",
  data() {
    return { spinning: false };
  },
  props: {
    config: {
      type: Object,
      default: function() {
        return {
          visible: false,
          scrList: [],
          type: "img"
        };
      }
    },
    title: {
      type: String,
      default: "智能提示框",
      required: false
    }
  }
};
</script>

<style lang="less">
/*指南弹框*/
.admin-modal {
  .ant-modal-footer {
    display: none;
  }
  .ant-modal-body {
    padding: 0;
    background-color: #444d58;
    max-height: 700px;
    overflow: auto;
  }
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    height: auto;
    background: #444d58;
    overflow: hidden;
  }

  .ant-carousel /deep/ .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.7;
  }
  .ant-carousel /deep/ .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel /deep/ .custom-slick-arrow:hover {
    opacity: 0.7;
  }

  .ant-carousel /deep/ .slick-slide h3 {
    color: #fff;
  }

  .item-nav {
    width: 100%;
    text-align: center;
    .div-img {
      min-width: 300px;
      width: 90%;
      margin: 0 auto;
      overflow: auto;
      padding: 20px;
      max-height: 660px;
      img {
        margin: 0 auto;
      }
    }
  }
  .list-empty {
    margin-top: 70px;
    width: 100%;
    img {
      margin: 0 auto;
    }
    .ant-empty {
      .ant-empty-description {
        color: #dce0e6;
      }
    }
  }
}
</style>
